<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue:class style</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active {
				background-color: green;
			}
			.error {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="msg" v-bind:title="vueTitle">
			<!--active样式是否显示，取决于后面的boolean值-->
			<p :class="{active:isActive}">我是P标签</p>
			<!-- 通过三目运算符来判断使用哪个class -->
			<p :class="isActive ? active : error">我是P标签</p>
			<!-- 使用数组 -->
			<p :class="items">我是P标签</p>
			<!-- 内联样式-->
			<p :style="styleObject">我是P标签</p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#msg',
				data: {
					message: 'Hello VUE!',
					vueTitle: '这是一个title2',
					isActive: false,
					active: 'active',
					error: 'error',
					items: ['active', 'error'],
					// 这里的css样式需要用驼峰命名法
					styleObject: {
						backgroundColor: 'blue',
						fontSize: '30px'
					}
				}
			});
		</script>
	</body>
</html>
